<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="vo.MemberVO" %>
<%@ page import="vo.OrganizationVO" %>

<!DOCTYPE html>
<html>

<head>
<c:if test="${sessionScope.loginMember == null }">
	<jsp:forward page="loginPage.sds"></jsp:forward>
</c:if>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>StepUp-DonationDetail</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">

<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

</head>

<body>

	<div id="wrapper">

		<!-- 사이드바 -->
		<nav class="navbar-default navbar-static-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="side-menu">
					<li class="nav-header">
						<div class="dropdown profile-element">
							<span> <c:if
									test="${sessionScope.loginMember.mimage == null}">
									<img alt="image" class="img-circle"
										src="imgUpload/anonymous.jpg" width="160px" />
								</c:if> <c:if test="${sessionScope.loginMember.mimage != null}">
									<img alt="image" class="img-circle"
										src="imgUpload/${sessionScope.loginMember.mimage}"
										width="160px" />
								</c:if>
							</span> <a data-toggle="dropdown" class="dropdown-toggle" href="#">
								<span class="clear"> <span class="block m-t-xs"> <strong
										class="font-bold">${sessionScope.loginMember.mname}</strong>
								</span> <span class="text-muted text-xs block">
										${sessionScope.loginMember.mposition} <b class="caret"></b>
								</span>
							</span>
							</a>
							<ul class="dropdown-menu animated fadeInRight m-t-xs">
								<li><a href="profile.html">Profile</a></li>
								<li class="divider"></li>
								<li><a href="login.html">Logout</a></li>
							</ul>
						</div>
					</li>
					<!-- 메뉴 리스트 -->
					<li><a href="index.sds"><i class="fa fa-bar-chart-o"></i>
							<span class="nav-label">Statistics</span></a></li>
					<li><a href="stepup_rank.sds"><i class="fa fa-flask"></i>
							<span class="nav-label">Ranking</span></a></li>
					<li><a href="stepup_badge.sds"><i class="fa fa-desktop"></i>
							<span class="nav-label">Badge</span></a></li>
					<li><a href="stepup_mission.sds"><i class="fa fa-envelope"></i>
							<span class="nav-label">Mission</span></a></li>
					<li><a href="stepup_temp.sds"><i class="fa fa-sitemap"></i>
							<span class="nav-label">Thermometer</span></a></li>
					<li class="active"><a href="stepup_donation.sds"><i
							class="fa fa-globe"></i> <span class="nav-label">Donation</span></a></li>
				</ul>
			</div>
		</nav>

		<div id="page-wrapper" class="gray-bg">

			<!-- 상단 메뉴 바 -->
			<div class="row border-bottom">
				<nav class="navbar navbar-static-top  " role="navigation"
					style="margin-bottom: 0">
					<div class="navbar-header">
						<a class="navbar-minimalize minimalize-styl-2 btn btn-primary "
							href="#"><i class="fa fa-bars"></i> </a>
						<form role="search" class="navbar-form-custom" method="post"
							action="search_results.html">
							<div class="form-group">
								<input type="text" placeholder="Search for something..."
									class="form-control" name="top-search" id="top-search">
							</div>
						</form>
					</div>

					<!-- 상단 메뉴 - 검색, 로그아웃 포함 -->
					<ul class="nav navbar-top-links navbar-right">
						
						<!-- 상단: 로그인, 로그아웃 버튼 -->
						<c:if test="${sessionScope.loginMember != null}">
							<li><a href="stepup_profile.sds"><i class="fa fa-sign-out"></i>
								Profile
							</a></li>
							<li><a href="logout.sds"> <i class="fa fa-sign-out"></i>
									Logout
							</a></li>
						</c:if>
					</ul>
				</nav>
			</div>

			<!-- 메인 페이지 : 제목 -->
			<div class="row wrapper border-bottom white-bg page-heading">
				<div class="col-sm-4">
					<h2>기부 상세 내역</h2>
					<ol class="breadcrumb">
						<li>Home</li>
						<li>기부 하기</li>
						<li class="active"><strong>기부 상세 내역</strong></li>
					</ol>
				</div>
				<div style="padding: 20px 30px 0px 0px">
					<img alt="image" class="img-responsive" src="img/logo.jpg"
					 style="Height: 80px; width: 80px;" align="right"  >
				</div>
			</div>

			<!-- 기부 상세페이지 -->
			<div class="row">
				<div class="col-lg-12">
					<div class="wrapper wrapper-content animated fadeInUp">
						<div class="ibox">
							<div class="ibox-content">
								<div class="row">
									<div class="col-lg-12">
										<div class="m-b-md">
											<h2>${dodetail.otitle}</h2>
										</div>
										<dl class="dl-horizontal">
											<dt>Contents:</dt>
											<dd>${dodetail.odetail}</dd>
										</dl>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-10">
										<dl class="dl-horizontal">
											<dt>Organization:</dt>
											<dd>${dodetail.oname}</dd><br/>
											<dt>Goal Redbean:</dt>
											<dd>
												<h2>${dodetail.oredbean}</h2>
											</dd>
											<dt>Current Redbean:</dt>
											<dd>
												<class="text-navy">
												<h2>${dodetail.ocredbean}</h2>
												</class>
											</dd>
											<dt>Participants:</dt>
											<dd class="project-people" id="redbean"></dd>
										</dl>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-9">
										<dl class="dl-horizontal">
											<dt>Completed:</dt>
											<dd>
												<div class="progress progress-striped active m-b-sm">
													<div
														style="width: ${(dodetail.ocredbean/dodetail.oredbean)*100}%;"
														class="progress-bar"></div>
												</div>
												<small>Project completed in <strong>${(dodetail.ocredbean/dodetail.oredbean)*100}%</strong>.
													Remaining close the project, sign a contract and invoice.
												</small>
											</dd>
										</dl>
									</div>
								</div>
								<div class="row">
									<div class="col-lg-10"></div>
									<div class="col-lg-2" id="donationBtn">
										
									</div>
								</div>
								<div class="row m-t-sm">
									<div class="col-lg-12">
										<div class="panel blank-panel">
											<div class="panel-body">
												<div class="tab-content">
													<div class="tab-pane active" id="tab-2">
														<div class="feed-activity-list">
															<table class="table table-striped">
																<thead>
																	<tr>
																		<th>Organization</th>
																		<th>ID</th>
																		<th>Give Redbean</th>
																		<th>Date</th>
																	</tr>
																</thead>
																<tbody id="redbeanlist">
																</tbody>
															</table>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 하단 부분 -->
			<div class="footer">
				<div align="right">
					StepUp System. Copyright <strong> &copy; SHINHAN DATA SYSTEM.</strong> All Right Reserved. 2015.
				</div>
			</div>
		</div>
	</div>

	<div id="modaldonation">
		<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content animated bounceInRight">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
						</button>
						<i class="fa fa-laptop modal-icon"></i>
						<h4 class="modal-title">${dodetail.otitle}</h4>
						<small class="font-bold">${dodetail.oname}</small>
					</div>
					<div class="modal-body">
						<p>
							<strong>여러분들의 팥을 기부해주세요. 좋은 일이 일어납니다^^</strong> <br/><br/>
							${dodetail.odetail} <br/>
							팥은 최대 <strong>${(dodetail.oredbean-dodetail.ocredbean)}</strong>개 까지 기부할 수 있습니다.<br/>
						</p>
						<div class="form-group">
							<div class="row">
								<div class="col-lg-6">
									<label>기부할 팥 </label> <input id="mredbean" type="number" min="0" max="500"
										placeholder="Enter Redbean Number" class="form-control">
								</div>
								<div class="col-lg-6">
									<label>보유한 팥</label>
									<div id="myredbean"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary" id="doredBtn">Donation</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- Mainly scripts -->
	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="js/inspinia.js"></script>
	<script src="js/plugins/pace/pace.min.js"></script>

	<script>
		$(document)
				.ready(
						function() {
							var percent = ${(dodetail.ocredbean / dodetail.oredbean) * 100};
							var ono = ${dodetail.ono};
							
							var currentRedbean = ${dodetail.ocredbean};
							var completedRedbean = ${dodetail.oredbean};
							
							
							$.ajax({
								url : "stepup_donationdetail_list.sds",
								type : "post",
								async : false,
								dataType : "json",
								success : function(data) {
									$.each(data,function(index,item) {
											if (item.ono == ono) {
												$("#redbeanlist").append(
													"<tr>"+"<td>"+
														"<span class='label label-primary'>"+
															"<i class='fa fa-check'>"+ "</i>"+ "기부완료"+
														"</span>"+
													"</td>"+
													"<td>"+ item.mid+"</td>"+
													"<td>"+ item.dredbean+"</td>"+
													"<td>"+ item.ddate+"</td>"+
													"</tr>");
											} else {
											}
										});
								},
								error : function() {
									alert("실패: " + data.status);
								}
							});
							
							$.ajax({
								url : "stepup_donation_list.sds",
								type : "post",
								async : false,
								dataType : "json",
								success : function(data){
									
									$("#myredbean").append(
			                        	"<strong>"+"<h3>"+data.memberredbean.mredbean + "개"+"</h3>"+"</strong>"
									);
									
									if(currentRedbean != completedRedbean){
										$("#donationBtn").append(
												"<button class='btn btn-primary' type='button' data-toggle='modal' data-target='#myModal'>"+
													"<i class='fa fa-check'>"+"</i>"+"&nbsp;"+"Donation"+"</button>"
										);
									} else {
										$("#donationBtn").append(
												"<button class='btn btn-default' type='button' >"+
												"<i class='fa fa-check'>"+"</i>"+"&nbsp;"+"Completed"+"</button>"
										);
									}
								},
								error : function(){
									alert("error");
								}
							});

							$('#loading-example-btn').click(function() {
								btn = $(this);
								simpleLoad(btn, true)
								simpleLoad(btn, false)
							});

							if (percent.toFixed(0) >= 0 && percent.toFixed(0) < 20) {
								$("#redbean").append(
									"<img alt='image' class='img-circle' src='img/redbean.jpg'>");
							} else if (percent.toFixed(0) >= 20 && percent.toFixed(0) < 40) {
								$("#redbean").append(
									"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>");
							} else if (percent.toFixed(0) >= 40 && percent.toFixed(0) < 60) {
								$("#redbean").append(
									"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>");
							} else if (percent.toFixed(0) >= 60 && percent.toFixed(0) < 80) {
								$("#redbean").append(
									"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>");
							} else if (percent.toFixed(0) >= 80 && percent.toFixed(0) <= 100) {
								$("#redbean").append(
									"<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>"
											+ "<img alt='image' class='img-circle' src='img/redbean.jpg'>");
							}
							
							$("#doredBtn").bind("click",function() {
								<%
									MemberVO vo = (MemberVO)session.getAttribute("loginMember");
									OrganizationVO ovo = (OrganizationVO)request.getAttribute("dodetail");
								%>
								
								if(!($.isNumeric($("#mredbean").val()))){
									alert("숫자를 입력해주세요!");
								} else {
									if($("#mredbean").val() > 0){
										if($("#mredbean").val() <= <%=vo.getMredbean()%>){
											if((completedRedbean-currentRedbean)<$("#mredbean").val()){
												alert("숫자가 너무 큽니다. "+(completedRedbean-currentRedbean)+"개 이내의 팥을 기부해주세요");	
											} else{
												alert($("#mredbean").val()+"개의 팥이 기부되었습니다.");
												location.href="stepup_donationUpdate.sds?mtemperature=<%= ovo.getOno() %>"+"&mid=<%= vo.getMid() %>"+"&mredbean="+$("#mredbean").val();
												$("#doredBtn").attr("data-dismiss","modal");	
											}
										} else{
											alert("현재 팥의 개수는 " + <%=vo.getMredbean()%> + " 입니다. 올바른 숫자를 다시 입력하세요.");
										}
									} else {
										alert("0보다 큰 숫자를 입력하세요");
									}
								}
								
							});
							
						});

		function simpleLoad(btn, state) {
			if (state) {
				btn.children().addClass('fa-spin');
				btn.contents().last().replaceWith(" Loading");
			} else {
				setTimeout(function() {
					btn.children().removeClass('fa-spin');
					btn.contents().last().replaceWith(" Refresh");
				}, 2000);
			}
		}
	</script>
</body>

</html>
